<template>
    <div class="app">
        <header>
            <h2>报名倒计时</h2>
            <ul>
                <li :class="[{active:active===0}]" @click="active = 0" @getChangeb='getChangeb' >学前</li>
                <li :class="[{active:active===1}]" @click="active = 1" @getChangeb='getChangeb'>小学</li>
            </ul>
        </header>
        <main>
            <img :src="src">
            <div v-if="active == 1">
                <div>
                    <h2>{{ha.a}}</h2>
                    <p>{{ha.b}}</p>
                    <span>{{ha.c}}</span>
                    <span>{{ha.d}}</span>
                    <a href="###">{{ha.e}}<i>{{ha.f}}</i></a>
                </div>
            </div>
            <div v-else>
                <Xxkson :hb='hb' @getChangeb='getChangeb'></Xxkson>
            </div>
        </main>
        
    </div>
</template>
<script>
import Xxkson from '@/homework/Xxkson.vue';
import school from '@/assets/11-27jz5158/school.png';
export default {
    components:{Xxkson},
    data(){
        return {
            active:0,
            src:school,
            hb:{a:'泡泡幼儿多元智能培养班',b:'主讲教师：待定',c:'海淀学清路金码大厦校区5',d:'2018-07-23至2018-08-17',e:'￥6880',f:'报名截止17天'},
            ha:{a:'球球小学多元智能培养班',b:'主讲教师：待定',c:'海淀学清路金码大厦校区5',d:'2018-07-23至2018-08-17',e:'￥6880',f:'报名截止17天'},
        }
    },
    methods:{
        getChangeb(value){
            this.hb=value;
        },
        
    }
}
</script>
<style lang="scss">
*{margin: 0;padding: 0;}
li{list-style: none;}
.app{
    width: 60%;
    height: 380px;
    margin: 50px auto;
    border: 2px solid greenyellow;
    header{
        width: 100%;
        height: 40px;
        background: #f2f2f2;
        display: flex;
        text-align: center;
        h2{
            width: 30%;
            height: 40px;
            line-height: 40px;
        }
        ul{
            width: 70%;
            height: 40px;
            line-height: 40px;
            display: flex;
            li{
                flex: 1;
            }
            li.active{
                background: #ffffff;
            }
        }
    }
    main{
        width: 100%;
        height: 340px;
        display: flex;
        img{
            display: block;
            width: 30%;
            height: 100%;
        }
        div{
            width: 70%;
            height: 100%;
            div{
                width: 100%;
                h2{
                    width: 100%;
                    height: 40px;
                    line-height: 40px;
                    text-align: center;
                    margin-top: 50px;
                }
                p{
                    width: 80%;
                    height: 30px;
                    line-height: 30px;
                    margin: 10px auto;
                    font-size: 20px;
                    font-weight: 550;
                    color: #333;
                }
                span{
                    display: block;
                    width: 80%;
                    height: 24px;
                    line-height: 24px;
                    margin: 15px auto;
                    font-size: 18px;
                    font-weight: 400;
                    color: #999999;
                }
                a{
                    display: flex;
                    justify-content: space-between;
                    width: 80%;
                    height: 30px;
                    line-height: 30px;
                    margin: 10px auto;
                    font-size: 20px;
                    font-weight: 550;
                    color: #ff0000;
                    text-decoration: none;
                    i{
                        font-style: normal;
                        color: green;
                    }
                }
            }
        }
    }
}
</style>